<template>
  <div>
    <transition name="bounce">

      <div class="dialog-ctrl-body" v-if="dialogContentData" v-show="dialogContentData.isShow">

        <div class="dialog-ctrl">
          <div class="dialog-header">
            <p>{{dialogContentData.title}}</p>
          </div>
          <!-- {{dialogInit}} -->
          <div class="dialog-content">
            {{dialogContentData.text}}
          </div>
          <div class="dialog-footer text-r">
              <button v-for="btn in dialogContentData.Btns" @click="layoutBtnFn(btn)" class="btn" :class="btn.className" type="button">
                {{btn.btnName}}
              </button>
             <!--<button type="button" class="btn btn-default">取消</button>
              <button type="button" class="btn btn-info">确认</button>-->
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
    export default {
        props:["dialogContentData"],
        name: "DialogUser",
        methods:{
          layoutBtnFn(btnObj){
            //console.log(btnObj);
            for( let i=0;i<btnObj["function"].length;i++ ){
              if( btnObj["function"][i] === "del" ){//确认删除
                this.$emit("userDel");
              }
            }
            this.close();
          },
          //关闭弹窗
          close(){
            this.$emit("closeFn")
          }
        }
    }
</script>

<style scoped>
  .bounce-enter-active {
    animation: bounce-in 0.55s;
  }

  .bounce-leave-active {
    animation: bounce-in 0.55s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
